<template>
<div id="areamanage" style= "height:100%;padding: 0;background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);">
  <div class="searchwrapper">
   <div style="width: 200px"></div>
   <p>园区名称</p>
   <el-input
       placeholder="请输入内容"
       prefix-icon="el-icon-search"
       v-model="areaName"
       style="width: 200px;margin-right: 100px"
   >
   </el-input>
   <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="searchAreaByName">搜索</el-button>
    <el-button style="margin-left: 50px"  type="primary"  icon="el-icon-circle-plus-outline"   size="small" @click="showAddDialog">添加园区</el-button>
   <div style="width: 500px"></div>
 </div>
  <div id="table" >
    <el-table
        :data="areaList"
        style="width: 90%">
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showArea(scope.row)">编辑</el-button>
          <el-button style="color: red" type="text" size="small" @click="area_delete(scope.row)">删除</el-button>
          <el-button  type="text" size="small" @click="showTotalNum(scope.row)">查看住宿人数</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[2,5,10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        >
    </el-pagination>
    <area-edit-dialog @ok="searchAreaByName" ref="AreaEditDialog"></area-edit-dialog>
    <area-add-dialog @ok="searchAreaByName" ref="AreaAddDiglog"></area-add-dialog>
    </div>
  </div>
</template>

<script>
import {_searchAreaByName, _areaAll, _areaDelete, _getTotalPeopleByAreaID} from '../../../api/super_admin'
import areaEditDialog from '../components/editComponents/AreaEditDialog.vue'
import areaAddDialog from '../components/addComponents/AreaAddDialog.vue'
import JSONBig from 'json-bigint'
export default {
  name: 'areamanage',
  components: {
    areaEditDialog,
    areaAddDialog
  },
  beforeCreate () {
    const DOT = {
      pageSize: 10,
      pageNo: 1,
      data: {name: ''}
    }
    _areaAll(DOT).then(res => {
      if (res.status) {
        this.areaList = res.data
        this.total = res.otherData.size
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    })
  },
  data () {
    return {
      areaList: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      areaName: '',
      preAreaName: '',
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    getFirstPage () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          areaName: this.preAreaName
        }
      }
      _searchAreaByName(DOT).then(res => {
        if (res.status) {
          console.log(res)
          this.areaList = res.data
          for (let i = 0; i < this.areaList.length; i++) {
            this.areaList[i].id = JSONBig.parse(this.areaList[i].id)
          }
          this.pageNo = 1
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
        // console.log(this.areaList)
      })
    },
    getArea () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          areaName: this.preAreaName
        }
      }
      _searchAreaByName(DOT).then(res => {
        if (res.status) {
          console.log(res)
          this.areaList = res.data
          for (let i = 0; i < this.areaList.length; i++) {
            this.areaList[i].id = JSONBig.parse(this.areaList[i].id)
          }
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
        // console.log(this.areaList)
      })
    },
    searchAreaByName () {
      this.preAreaName = this.areaName
      this.getFirstPage()
    },
    handleCurrentChange (value) {
      this.pageNo = value
      this.getArea()
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getFirstPage()
    },
    area_delete (row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.id.toString())
        _areaDelete(row.id.toString()).then(res => {
          if (res.status) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getFirstPage()
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }).catch()
    },
    showArea (Area) {
      this.$refs.AreaEditDialog.show(Area)
    },
    showAddDialog () {
      this.$refs.AreaAddDiglog.show()
    },
    showTotalNum (Area) {
      _getTotalPeopleByAreaID(Area.id).then(res => {
        if (res.status) {
          this.$confirm('园区' + Area.name + '共居住了' + res.data + '人', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then().catch()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.searchwrapper {
  margin-top: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.searchwrapper p {
  margin-left: 200px;
  margin-right: 10px; /* 调整 p 标签与 el-input 之间的间距 */
  font-weight: bold; /* 可选：设置 p 标签的字体加粗 */
}

.searchwrapper .el-input {
  flex: 1; /* el-input 自动填充剩余空间 */
}

</style>
